@charset "utf-8";
@import "reset";
html {
	max-width: 750px;
}

.web {
	width: 100%;
	height: 100%;
	background-color: #f1f2f6;
	.main {
		width: 100%;
		height: 100%;
		overflow-x: hidden;
		margin: 0 auto;
		background: url("../img/main_bg.jpg") no-repeat top center/100%; 
		position: relative;
		.top {
			position: absolute;
			top: 15px;
			width: 100%;
			.rule {
				position: absolute;
				left: 3%;
				text-align: center;
				img {
					width: 50%;
					display: inline-block;
					margin: 0 auto;
				}
				.rule_con {
					font-size: 16px;
					color: #ffffff;
				}
			}
			.prize {
				position: absolute;
				right: 3%;
				img {
					width: 100%;
				}
				.prize_con {
					font-size: 16px;
					color: #ffffff;
				}
			}
			h1 {
				font-size: 36px;
				color: #ffffff;
				font-weight: normal;
				letter-spacing: 10px;
				text-align: center;
			}
		}
		.scroll {
			position: absolute;
			top: 90px;
			left: 50%;
			transform: translateX(-50%);
			width: 86.6%;
			border-radius: 50px;
			background-color: rgba(255, 255, 255, 0.6);
			img {
				width: 10.7%;
				margin-left: 4%;
			}
			p {
				font-size: 36px;
				color: #fc7641;
				display: inline-block;
				line-height: 71px;
				vertical-align: text-bottom;
				margin-left: 5px;
				em {
					margin: 0 2px;
				}
			}
		}
		.box {
			width: 80%;
			position: absolute;
			top: 190px;
			left:10%;
			z-index: 9;
			background-color: #ffffff;
			border-radius: 10px;
			overflow: hidden;
			display: none;
			.produce {
			    display: block;
				width: 100%;
				font-size: 0;
				img {
				    display: block;
					width: 100%;
				}
			}
			.box_con {
				margin-left: 3%;
				h2 {
					font-size: 36px;
					color: #ff614a;
					letter-spacing: 5px;
				}
				p {
					font-size: 24px;
					color: #363636;
					letter-spacing: 3px;
					padding: 10px 0;
				}
				h3 {
					font-size: 30px;
					color: #e5403a;
					font-weight: normal;
					letter-spacing: 5px;
				}
			}
			.check_detail {
				text-align: center;
				padding: 15px 0 0 0;
				img {
					width: 6%;
				}
				span {
					display: block;
					font-size: 26px;
					color: #fc7641;
				}
			}
		}
		// .box:nth-of-type(1) {
		// 	display: block;
		// 	width: 86.6%;
		// }
		// .box:nth-of-type(2) {
		// 	display: block;
		// 	width: 86%;
		// }
		.choose {
			width: 100%;
			position: absolute;
			top: 1090px;
			text-align: center;
			.unlike,
			.like {
				width: 16.4%;
				position: absolute;
				top: 0;
				img {
					width: 100%;
				}
			}
			.unlike {
				left: 20%;
			}
			.like {
				right: 20%;
			}
		}
	}
}

@media only screen and (max-width: 480px) {
	.web {
		.main {
			.top {
				top: 10px;
				.rule {
					.rule_con {
						font-size: 12px;
					}
				}
				.prize {
					img {
						width: 70%;
					}
					.prize_con {
						font-size: 12px;
					}
				}
				h1 {
					font-size: 22px;
				}
			}
			.scroll {
				top: 70px;
				img {
					width: 8.7%;
				}
				p {
					font-size: 20px;
					line-height: 36px;
				}
			}
			.box {
				top: 135px;
				.box_con {
					h2 {
						font-size: 22px;
					}
					p {
						font-size: 15px;
						padding: 5px 0;
					}
					h3 {
						font-size: 18px;
					}
				}
				.check_detail {
					img {
						display: inline-block;
						width: 6%;
					}
					span {
						font-size: 15px;
					}
				}
			}
			.choose {
				top: 700px;
			}
		}
	}
}

@media only screen and (max-width: 414px) {
	.web {
		.main {
			.top {
				.rule {
					.rule_con {
						font-size: 12px;
					}
				}
				.prize {
					img {
						width: 70%;
					}
					.prize_con {
						font-size: 12px;
					}
				}
				h1 {
					font-size: 22px;
				}
			}
			.scroll {
				top: 60px;
				p {
					font-size: 18px;
					line-height: 35px;
				}
			}
			.box {
				top: 115px;
				.box_con {
					h2 {
						font-size: 18px;
					}
					p {
						font-size: 13px;
						padding: 5px 0;
					}
					h3 {
						font-size: 15px;
					}
				}
				.check_detail {
					padding: 10px 0 0 0;
					img {
						display: inline-block;
						width: 6%;
					}
					span {
						font-size: 12px;
					}
				}
			}
			.choose {
				top: 600px;
			}
		}
	}
}

@media only screen and (max-width: 376px) {
	.web {
		.main {
			.top {
				.rule {
					img {
						width: 44%;
					}
					.rule_con {
						font-size: 12px;
					}
				}
				.prize {
					text-align: center;
					img {
						width: 60%;
					}
					.prize_con {
						font-size: 12px;
					}
				}
				h1 {
					font-size: 22px;
				}
			}
			.scroll {
				top: 60px;
				img {
					width: 6.7%;
				}
				p {
					font-size: 15px;
					line-height: 28px;
				}
			}
			.box {
				top: 105px;
				.box_con {
					h2 {
						font-size: 15px;
					}
					p {
						font-size: 8px;
						padding: 2px 0;
						letter-spacing: 1px;
					}
					h3 {
						font-size: 12px;
						letter-spacing: 2px;
					}
				}
				.check_detail {
					padding: 7px 0 0 0;
					img {
						display: inline-block;
						width: 6%;
					}
					span {
						font-size: 12px;
					}
				}
			}
			.choose {
				top: 535px;
			}
		}
	}
}

@media only screen and (max-width: 370px) {
	.web {
		.main {
			.choose {
				top: 535px;
			}
		}
	}
}

@media only screen and (max-width: 340px) {
	.web {
		.main {
			.top {
				.rule {
					img {
						width: 38%;
					}
					.rule_con {
						font-size: 10px;
					}
				}
				.prize {
					text-align: center;
					img {
						width: 55%;
					}
					.prize_con {
						font-size: 10px;
					}
				}
				h1 {
					font-size: 22px;
				}
			}
			.scroll {
				top: 55px;
				img {
					width: 6.7%;
				}
				p {
					font-size: 15px;
					line-height: 28px;
				}
			}
			.box {
				top: 95px;
				.box_con {
					h2 {
						font-size: 15px;
					}
					p {
						font-size: 8px;
						padding: 2px 0;
						letter-spacing: 1px;
					}
					h3 {
						font-size: 12px;
						letter-spacing: 2px;
					}
				}
				.check_detail {
					padding: 5px 0 0 0;
					img {
						display: inline-block;
						width: 6%;
					}
					span {
						font-size: 12px;
					}
				}
			}
			.choose {
				top: 480px;
			}
		}
	}
}